<template>
  <a-modal
    v-model:visible="show"
    :title="title"
    width="800px"
    height="600px"
    class="dispatchContainer"
    @ok="ok"
    @cancel="cancel"
  >
    <div class="h-120 choose-content p-5">
      <TablePage>
        <template #top>
          <SearchForm
            ref="searchModalRef"
            v-model:columns="columns"
            :show-add-btn="false"
            :keyword-search-data="searchModel"
            @search="handleSearch"
          />
        </template>
        <SlTable
          v-model:row-selection="rowSelection"
          :columns="columns"
          row-key="userId"
          :data-source="tableData"
          :loading="tableLoading"
          :scroll="{ x: 'auto' }"
        >
        </SlTable>
      </TablePage>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
import { useI18n } from "/@/locales/useI18n";
import { computed, ref, watch, nextTick } from "vue";
import { getWorkOperatorList } from "/@/api/aiot/projectManage";
import { message } from "ant-design-vue";
import { ProjectUser } from "../api/aiot/projectManage/models";
import { init } from "echarts/core";

const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    visible: boolean;
    projectId?: string;
    selectMode?: "radio" | "checkbox";
    selectedUserIds: Array<string>;
    title?: string;
    searchPlaceHolder?: string;
  }>(),
  {
    selectMode: "radio",
    title: "选择用户",
    searchPlaceHolder: "成员名/电话",
  }
);
const emits = defineEmits(["ok", "update:visible", "update:selectedUserIds"]);
const show = ref<boolean>(false);
const tableLoading = ref<boolean>(false);
const searchModalRef = ref();

watch(
  () => props.visible,
  (v) => {
    if (v) {
      getUser();
    } else {
      userIds.value = [];
      curSelectedRow.value = [];
      emits("update:selectedUserIds", []);
      searchModalRef.value.clearKeyword();
    }
    userIds.value = [];
    show.value = v;
  }
);
//第一次打开
const userIds = ref<Array<string>>(["83c2ef86-aa69-4968-923b-96df098443fc"]);
const searchModel = [{ key: "searchText", label: props.searchPlaceHolder }];
const tableData = ref<Array<ProjectUser>>([]);
async function getUser() {
  tableLoading.value = true;
  // tableData.value = (await getProjectMembersVoByProjectId({ projectId: props.projectId || "" })) || [];
  tableData.value = (await getWorkOperatorList({ projectId: props.projectId || "" })) || [];
  tableLoading.value = false;
}
let curSelectedRow = ref<ProjectUser[]>([]);
watch(
  () => props.selectMode,
  (val) => {
    rowSelection.value.type = props.selectMode;
  }
);

const rowSelection = ref({
  type: props.selectMode,
  selectedRowKeys: userIds,
  selectedRows: curSelectedRow,
  onChange: (selectedRowKeys: string[], selectedRows: ProjectUser[]) => {
    curSelectedRow.value = selectedRows;
    userIds.value = selectedRowKeys;
  },
  getCheckboxProps: (record: ProjectUser) => {},
});
watch(
  () => props.selectedUserIds,
  () => {
    nextTick(() => {
      userIds.value = props.selectedUserIds;
      curSelectedRow.value = tableData.value.filter((item) => {
        return userIds.value.includes(item.userId);
      });
    });
  }
);
const columns = [
  {
    title: t("aiot.projectManage.userName"),
    dataIndex: "userName",
    ellipsis: true,
  },
  {
    title: t("aiot.projectManage.organizationName"),
    dataIndex: "organizationName",
    ellipsis: true,
  },
  {
    title: "电话",
    dataIndex: "companyPhone",
    ellipsis: true,
  },
];
async function handleSearch(model) {
  tableLoading.value = true;
  // tableData.value =
  //   (await getProjectMembersVoByProjectId({ projectId: props.projectId || "", searchText: model.searchText })) || [];
  tableData.value =
    (await getWorkOperatorList({ projectId: props.projectId || "", searchText: model.searchText })) || [];
  tableLoading.value = false;
}
//窗口关闭
function cancel() {
  emits("update:visible", false);
}
const content = ref<HTMLDivElement>();
function ok() {
  // if (curSelectedRow.value?.length === 0) {
  //   message.warning(t("aiot.serviceOrderOperationMsg.chooseUserMsg"));
  //   return;
  // }
  emits("update:visible", false);
  emits("ok", { userIds: userIds.value, selectedUsers: curSelectedRow.value });
}
</script>
